ãã«ã¿ã¢ããããŒããšã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã«ããReact Server Componentsã®ç»æçãªé²æ©ãæ¢ããŸãããã®ãã©ãã€ã ã·ãããã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ããŠãŒã¶ãŒäœéšãéçºå¹çãããã«åäžãããããçè§£ããŸãããã
React Server Componentsã®ãã«ã¿ã¢ããããŒãïŒã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã®é©åœ
ããã³ããšã³ãéçºã®äžçã¯ãããè¯ãããã©ãŒãã³ã¹ãåäžãããŠãŒã¶ãŒäœéšããããŠå¹ççãªéçºã¯ãŒã¯ãããŒãçµ¶ãéãªã远æ±ããããšã§ãåžžã«é²åãç¶ããŠããŸããé·å¹Žã«ãããããã¬ãŒã ã¯ãŒã¯ãã©ã€ãã©ãªã¯ãã¯ã©ã€ã¢ã³ããµã€ãã®ã€ã³ã¿ã©ã¯ãã£ããã£ãšãµãŒããŒãµã€ãã¬ã³ããªã³ã°ãšã®éã«å åšãããã¬ãŒããªããšæ ŒéããŠããŸãããåŸæ¥ã®ã¢ãããŒãã§ã¯ãããŒãžå šäœã®åèªã¿èŸŒã¿ãè€éãªã¯ã©ã€ã¢ã³ããµã€ãã®ãã€ãã¬ãŒã·ã§ã³ããã»ã¹ãå¿ èŠãšãªãããšãå€ããç¹ã«äœéãªãããã¯ãŒã¯ãæ§èœã®äœãããã€ã¹ã§ã¯ãé¡èãªé å»¶ããŠãŒã¶ãŒã®äžæºãåŒãèµ·ããå¯èœæ§ããããŸãããReact Server Components (RSC) ã¯ãReactã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯ãšé ä¿¡æ¹æ³ãæ ¹æ¬çã«å€ãã匷åãªãœãªã¥ãŒã·ã§ã³ãšããŠç»å ŽããŸããããããŠä»ããã«ã¿ã¢ããããŒããšã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã®åºçŸã«ãããRSCã¯ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã¢ãŒããã¯ãã£ã®æ°æä»£ãåãéããæ¯é¡ã®ãªãéåºŠãšæµåæ§ãå®çŸããããšããŠããŸãã
Reactã«ããããµãŒããŒãµã€ãã¬ã³ããªã³ã°ã®é²å
ãã«ã¿ã¢ããããŒãã®è©³çްã«å ¥ãåã«ãç§ãã¡ãããã«è³ããŸã§ã®éã®ããçè§£ããããšãéèŠã§ãããµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒã¯ããµãŒããŒäžã§HTMLãã¬ã³ããªã³ã°ããŠã¯ã©ã€ã¢ã³ãã«éä¿¡ããããšã§ãåæããŒãžèªã¿èŸŒã¿æéãšSEOãæ¹åããããã®æè¡ãšããŠå€ãããå©çšãããŠããŸãããããããåŸæ¥ã®SSRã«ã¯ç¬èªã®èª²é¡ã䌎ãããšããããããŸããïŒ
- ããŒãžå šäœã®åã¬ã³ããªã³ã°ïŒ ããŒãžéãç§»åããéã«ã¯ãéåžžããµãŒããŒãžã®å®å šãªã©ãŠã³ãããªãããšã¯ã©ã€ã¢ã³ãã§ã®ããŒãžã®å®å šãªåã¬ã³ããªã³ã°ãå¿ èŠãšãªããåäœãé ãæããããããšããããŸããã
- ãã€ãã¬ãŒã·ã§ã³ã®ããã«ããã¯ïŒ ã¯ã©ã€ã¢ã³ããµã€ãã®JavaScriptã¯ãéçãªHTMLãããã€ãã¬ãŒããããã€ãã³ããªã¹ããŒãã¢ã¿ããããŠããŒãžãã€ã³ã¿ã©ã¯ãã£ãã«ããå¿ èŠããããŸããããã®ãã€ãã¬ãŒã·ã§ã³ããã»ã¹ã¯ãç¹ã«å€§èŠæš¡ã§è€éãªã¢ããªã±ãŒã·ã§ã³ã§ã¯é倧ãªããã«ããã¯ãšãªããããŒãžã¯è¡šç€ºãããŠãããã®ã®å®å šã«ã¯æ©èœããªãæéãçããããšããããŸããã
- ã³ãŒãã®éè€ïŒ å€ãã®å Žåãåãã³ã³ããŒãã³ãããžãã¯ããµãŒããŒãšã¯ã©ã€ã¢ã³ãã®äž¡æ¹ã«ååšããå¿ èŠããããã³ãŒãã®éè€ããã³ãã«ãµã€ãºã®å¢å€§ã«ã€ãªãã£ãŠããŸããã
ã¯ã©ã€ã¢ã³ããµã€ãã¬ã³ããªã³ã°ïŒCSRïŒã䜿çšããã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ïŒSPAïŒã¯ãåæèªã¿èŸŒã¿åŸã«æµåçã§ã¢ããªã®ãããªäœéšãæäŸããããšã§ããããã®åé¡ã®äžéšã解決ããŸããããããããã©ãŠã¶ã«æåã«éä¿¡ãããHTMLã空ã§ãããããåæèªã¿èŸŒã¿æéãé ããªããSEOäžã®æœåšçãªãã¡ãªããããããŸããã
React Server Components (RSC)ã®å°å ¥
ãã¬ãã¥ãŒæ©èœãšããŠå°å ¥ãããçŸåšã§ã¯åºãæ¡çšãããŠããReact Server Componentsã¯ããã©ãã€ã ã·ããã象城ããŠããŸããããã«ãããéçºè ã¯ãµãŒããŒäžã§ã®ã¿å®è¡ãããã³ã³ããŒãã³ããæ§ç¯ã§ããŸããããã«ã¯ããã€ãã®éå€§ãªæå³ããããŸãïŒ
- ã¯ã©ã€ã¢ã³ããµã€ãJavaScriptã®åæžïŒ ãµãŒããŒäžã§ã®ã¿ã¬ã³ããªã³ã°ãããã³ã³ããŒãã³ãã¯ã¯ã©ã€ã¢ã³ãã«éä¿¡ããå¿ èŠããªãããã©ãŠã¶ãããŠã³ããŒããè§£æãå®è¡ããªããã°ãªããªãJavaScriptã®éãå€§å¹ ã«åæžããŸããããã¯ãç¹ã«ã¢ãã€ã«ããã€ã¹ã垯åå¹ ãéãããŠããå°åã§ã®ããã©ãŒãã³ã¹ã«ãšã£ãŠå€§ããªå©ç¹ã§ãã
- ããŒã¿ãžã®çŽæ¥ã¢ã¯ã»ã¹ïŒ Server Componentsã¯ãAPIåŒã³åºããå¿ èŠãšããã«ãããŒã¿ããŒã¹ããã¡ã€ã«ã·ã¹ãã ãªã©ã®ãµãŒããŒãµã€ããªãœãŒã¹ã«çŽæ¥ã¢ã¯ã»ã¹ã§ãããããããŒã¿ãã§ãããç°¡çŽ åãããããã©ãŒãã³ã¹ãåäžããŸãã
- ãã³ãã«ãµã€ãºãžã®åœ±é¿ãŒãïŒ Server Componentsã®ã¿ã§äœ¿çšãããã©ã€ãã©ãªã¯ãã¯ã©ã€ã¢ã³ããµã€ãã®ãã³ãã«ãµã€ãºã«åœ±é¿ãäžããŸããã
ããããRSCã¯æ°ããªã¢ãŒããã¯ãã£äžã®èæ ®äºé ããããããŸãããæåã®ã¬ã³ããªã³ã°ã¯äŸç¶ãšããŠã¯ã©ã€ã¢ã³ãã«éä¿¡ããå¿ èŠãããããã®åŸã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãããŒã¿æŽæ°ã«ã¯ãããŒãžå šäœã®åèªã¿èŸŒã¿ãªãã§UIãæŽæ°ããã¡ã«ããºã ãå¿ èŠã§ããã
課é¡ïŒåçã¢ããããŒãã«ããã®ã£ããã®å æ
RSCã®ç䟡ã¯ããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ãããŒã¿å€æŽã«å¿ããŠUIãåçã«æŽæ°ã§ããããã«ãªã£ããšãã«çºæ®ãããŸããããã§ãã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ãšãã«ã¿ã¢ããããŒãã®æŠå¿µãéèŠã«ãªããŸããæ§ã ãªãœãŒã¹ããã®ãªã¢ã«ã¿ã€ã ããŒã¿ã衚瀺ããè€éãªããã·ã¥ããŒãããŠãŒã¶ãŒãæäœããŠããå Žé¢ãæ³åããŠã¿ãŠãã ãããåŸæ¥ã®SSRèšå®ã§ã¯ãããã·ã¥ããŒãã®å°ããªéšåãæŽæ°ããããã«ããµãŒããŒãžã®ã©ãŠã³ãããªãããšããŒãžã®å€§éšåã®åã¬ã³ããªã³ã°ãå¿ èŠã«ãªããããããŸãããRSCã§ã¯ã倿Žãããç¹å®ã®ã³ã³ããŒãã³ãã®ã¿ãæŽæ°ããããšãç®æšã§ãã
ãã«ã¿ã¢ããããŒãïŒäžæ žãšãªãã€ãããŒã·ã§ã³
ãã«ã¿ã¢ããããŒãã¯ãRSCã®åçãªæ§è³ªãæ¯ãããšã³ãžã³ã§ãããµãŒããŒããã¯ã©ã€ã¢ã³ãã«æ°ããã³ã³ããŒãã³ãããªãŒå šäœãéä¿¡ãã代ããã«ããã«ã¿ã¢ããããŒãã¯ååã®ã¬ã³ããªã³ã°ä»¥éã«çºçããå·®åãŸãã¯å€æŽç¹ã®ã¿ãéä¿¡ããŸããããã¯ãGitã®ãããªããŒãžã§ã³ç®¡çã·ã¹ãã ãã³ãŒãã®å€æŽã远跡ããæ¹æ³ã«äŒŒãŠããŸãããµãŒããŒäžã®ã³ã³ããŒãã³ãããæŽæ°ãããããŒã¿ãç¶æ ã®å€åã«ãã£ãŠåã¬ã³ããªã³ã°ããããšãReactã¯ä»¥åã®ã¬ã³ããªã³ã°åºåãšæ°ããåºåãšã®å·®åãèšç®ããŸãã
ãã®ãã«ã¿ã¯ãã®åŸã·ãªã¢ã©ã€ãºãããã¯ã©ã€ã¢ã³ãã«éä¿¡ãããŸããã¯ã©ã€ã¢ã³ããµã€ãã®Reactã©ã³ã¿ã€ã ã¯ãã®ãã«ã¿ãåãåããDOMå ã®æ¢åã®ã³ã³ããŒãã³ãããªãŒã«é©çšããŸãããã®ããã»ã¹ã¯ã圱é¿ãåããŠããªãUIéšåã®åã¬ã³ããªã³ã°ãé¿ãããããã¯ãŒã¯çµç±ã§è»¢éããå¿ èŠã®ããããŒã¿éãæå°éã«æãããããéåžžã«å¹ççã§ãã
ãã«ã¿ã¢ããããŒãã®å®éã®ä»çµã¿ïŒ
- ãµãŒããŒãµã€ãã®åã¬ã³ããªã³ã°ïŒ ã€ãã³ãïŒäŸïŒããŒã¿ãã§ããããã©ãŒã éä¿¡ïŒã«ããããµãŒããŒäžã§Server Componentãåã¬ã³ããªã³ã°ãããŸãã
- 差忀åºïŒDiffingïŒïŒ ãµãŒããŒäžã®Reactããæ°ããåºåãšãã®ã³ã³ããŒãã³ãã®ä»¥åã«éä¿¡ãããåºåãšãæ¯èŒããŸãã
- ãã«ã¿ã®ã·ãªã¢ã©ã€ãºïŒ å·®åïŒãã«ã¿ïŒãã³ã³ãã¯ããªåœ¢åŒã«ã·ãªã¢ã©ã€ãºãããŸãã
- ãããã¯ãŒã¯è»¢éïŒ ãã®ãã«ã¿ãã¯ã©ã€ã¢ã³ãã«éä¿¡ãããŸãã
- ã¯ã©ã€ã¢ã³ããµã€ãã®ãããé©çšïŒ ã¯ã©ã€ã¢ã³ããµã€ãã®Reactã©ã³ã¿ã€ã ããã«ã¿ãåãåããã³ã³ããŒãã³ããããŒãžå šäœãåã¬ã³ããªã³ã°ããããšãªããUIã®å¯Ÿå¿ããéšåãå¹ççã«æŽæ°ããŸãã
ã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ïŒãã«ã¿ãå¹ççã«é ä¿¡ãã
ãã«ã¿ã¢ããããŒããäœã倿Žããããã説æããã®ã«å¯Ÿããã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã¯ãããã®å€æŽãã©ã®ããã«é ä¿¡ããããã説æããŸãããµãŒããŒäžã§RSCããªãŒå šäœãã¬ã³ããªã³ã°ãããã®ãåŸ ã£ãŠããäžåºŠã«ã¯ã©ã€ã¢ã³ãã«éä¿¡ããã®ã§ã¯ãªããã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã§ã¯ããµãŒããŒãå©çšå¯èœã«ãªã£ãRSCåºåãã¹ããªãŒãã³ã°ã§éä¿¡ã§ããŸããããã¯ãã¢ããªã±ãŒã·ã§ã³ã®ç°ãªãéšåãç°ãªãã¿ã€ãã³ã°ã§ã¬ã³ããªã³ã°ãããç¬ç«ããŠã¯ã©ã€ã¢ã³ãã«ã¹ããªãŒãã³ã°ã§ããããšãæå³ããŸãã
ããããé²ç»æžã¿ã®æŸéã«å¯Ÿããã©ã€ããã¥ãŒã¹ãã£ãŒãã®ããã«èããŠã¿ãŠãã ãããã€ã³ã¯ãªã¡ã³ã¿ã«ã¹ããªãŒãã³ã°ã§ã¯ãã¯ã©ã€ã¢ã³ãã¯ãµãŒããŒããæåã®ããŒã¿çãå°çãããšããã«ã³ã³ãã³ãã®ã¬ã³ããªã³ã°ãéå§ãããããäœæçãªèªã¿èŸŒã¿æéãççž®ãããããå¿çæ§ã®é«ããŠãŒã¶ãŒäœéšãå®çŸããŸããããã¯ãå€ãã®ç¬ç«ããã³ã³ããŒãã³ããæã€è€éãªã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠç¹ã«æçã§ãã
ã€ã³ã¯ãªã¡ã³ã¿ã«ã¹ããªãŒãã³ã°ã®äž»ãªå©ç¹ïŒ
- Time-to-Interactive (TTI) ã®åäžïŒ ãŠãŒã¶ãŒã¯ããµãŒããŒäžã§ããŒãžå šäœãã¬ã³ããªã³ã°ãããã®ãåŸ ã€å¿ èŠããªããããã¢ããªã±ãŒã·ã§ã³ã®äžéšãããæ©ãèŠãŠæäœã§ããŸãã
- ããã°ã¬ãã·ãã¬ã³ããªã³ã°ïŒ ããŒã¿ãå°çããã«ã€ããŠUIãã¯ã©ã€ã¢ã³ãäžã§æ®µéçã«æ§ç¯ãããããã¹ã ãŒãºã§ãã€ãããã¯ãªäœéšãçãŸããŸãã
- äœéãªã³ã³ããŒãã³ããžã®èæ§ïŒ ãµãŒããŒäžã®ããã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ã«æéãããã£ãŠããä»ã®é«éãªã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ãšã¹ããªãŒãã³ã°ã劚ããŸããã
- ãµãŒããŒã®åŸ æ©æéã®åæžïŒ ãµãŒããŒã¯ãã¬ã¹ãã³ã¹å šäœãä¿çããã®ã§ã¯ãªããæºåãã§ããããŒã¿ãã£ã³ã¯ãéä¿¡ã§ããŸãã
çžä¹å¹æïŒãã«ã¿ã¢ããããŒã + ã€ã³ã¯ãªã¡ã³ã¿ã«ã¹ããªãŒãã³ã°
ãã«ã¿ã¢ããããŒããšã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ãçµã¿åãããããšã§ãçã®éæ³ãèµ·ãããŸããã€ã³ã¯ãªã¡ã³ã¿ã«ã¹ããªãŒãã³ã°ã¯ãæåã®RSCã¬ã³ããªã³ã°ãšãã®åŸã®æŽæ°ãå¯èœãªéãè¿ éã«ã¯ã©ã€ã¢ã³ãã«é ä¿¡ãããããšãä¿èšŒããŸãããããŠããã«ã¿ã¢ããããŒãã¯ãå¿ èŠãªå€æŽã®ã¿ãéä¿¡ããããšã§ããããã®é ä¿¡ãå¯èœãªéãå¹ççã«ããŸãã
RSCã§æ§ç¯ãããeã³ããŒã¹ãµã€ãããŠãŒã¶ãŒãé²èЧããŠããã·ããªãªãèããŠã¿ãŸãããïŒ
- åæèªã¿èŸŒã¿ïŒ ãµãŒããŒãååäžèЧããŒãžãã¹ããªãŒãã³ã°ããŸããååã«ãŒããããã²ãŒã·ã§ã³ã®ãããªã³ã³ããŒãã³ãããµãŒããŒã§ã¬ã³ããªã³ã°ããããšããããã¯ã¯ã©ã€ã¢ã³ãã«éä¿¡ãããŠè¡šç€ºãããŸãã
- ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ïŒ ãŠãŒã¶ãŒãã«ãŒãã«ååã远å ããŸããããã«ãããã«ãŒãã®ã«ãŠã³ãã³ã³ããŒãã³ãããããŠå Žåã«ãã£ãŠã¯ã«ãŒãã¢ãŒãã«ã®åã¬ã³ããªã³ã°ãããªã¬ãŒãããŸãã
- ãã«ã¿ã¢ããããŒãïŒ ããããŒå šäœãåã¬ã³ããªã³ã°ããŠéãè¿ã代ããã«ããµãŒããŒã¯ã«ãŒãã«ãŠã³ãã®ãã«ã¿ïŒäŸïŒ1å¢å ïŒãèšç®ããŸãããã®å°ããªãã«ã¿ãã¯ã©ã€ã¢ã³ãã«ã¹ããªãŒãã³ã°ãããŸãã
- ã¯ã©ã€ã¢ã³ãã®æŽæ°ïŒ ã¯ã©ã€ã¢ã³ããµã€ãã®Reactããã«ã¿ãåãåããã«ãŒãã®ã«ãŠã³ãæ°ã®ã¿ãæŽæ°ããŸããããŒãžã®æ®ãã®éšåã¯å€æŽãããŸããã
- ãããªãã€ã³ã¿ã©ã¯ã·ã§ã³ïŒ ãŠãŒã¶ãŒãåå詳现ããŒãžã«ç§»åããŸãããµãŒããŒã¯æ°ããååã®è©³çްãã¹ããªãŒãã³ã°ããŸããããŒãžäžã®äžéšã®ã³ã³ããŒãã³ããå ±æãããŠããå ŽåïŒäŸïŒããããŒïŒãããããŒã®ãã«ã¿ïŒå€æŽãããå ŽåïŒã®ã¿ãéä¿¡ãããã³ã³ããŒãã³ãå šäœãå床éä¿¡ãããããšã¯ãããŸããã
ãã®ã·ãŒã ã¬ã¹ãªçµ±åã«ããããŠã§ããã©ãŠã¶å ã§ãããªããããã€ãã£ãã®ãã¹ã¯ããããã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ã«å¹æµãããä¿¡ããããªãã»ã©é«éã§å¿çæ§ã®é«ãäœéšãçãŸããŸãã
ã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ãšå€æ§ãªãªãŒãã£ãšã³ã¹ãžã®åœ±é¿
ãã«ã¿ã¢ããããŒããšã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã®å©ç¹ã¯ã倿§ãªãããã¯ãŒã¯ç¶æ³ãããã€ã¹èœåãæã€ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ãèæ ®ããå Žåã«ç¹ã«å¢å¹ ãããŸãã
ãããã¯ãŒã¯ã®äžå®å®æ§ãžã®å¯Ÿå¿ïŒ
äžçã®å€ãã®å°åã§ã¯ãå®å®ããé«éã€ã³ã¿ãŒãããã¯åœããåã§ã¯ãããŸãããæ°èåžå Žã®ãŠãŒã¶ãŒãã¢ãã€ã«ããŒã¿ã«äŸåããŠãããŠãŒã¶ãŒã¯ãããäœéã§ä¿¡é Œæ§ã®äœãæ¥ç¶ãçµéšããããšããããããŸããã€ã³ã¯ãªã¡ã³ã¿ã«ã¹ããªãŒãã³ã°ã¯ãéèŠãªã³ã³ãã³ããå°ããã€é ä¿¡ããããããæ¥ç¶ç¶æ ãæªããŠããŠãŒã¶ãŒãã¢ããªã±ãŒã·ã§ã³ãããæ©ãæäœãå§ããããããšãæå³ããŸãããã«ã¿ã¢ããããŒãã¯ããã®åŸã®ã€ã³ã¿ã©ã¯ã·ã§ã³ã®ãã€ããŒããµã€ãºãããã«åæžããã¢ããªã±ãŒã·ã§ã³ããã䜿ãããããããŒã¿éçŽçã§ãªãããŸãã
ããã€ã¹éã§ã®ãŠãŒã¶ãŒäœéšã®åäžïŒ
ããã€ã¹ã®æ§èœãšããã©ãŒãã³ã¹ã¯äžçäžã§å€§ããç°ãªããŸããå é²åœã®ãã€ãšã³ããªã©ãããããã¯ãä»ã®å°åã®å»äŸ¡ãªã¹ããŒããã©ã³ãããã¯ããã«éãJavaScriptãåŠçããŸããã¬ã³ããªã³ã°ãšèšç®ããµãŒããŒã«ãªãããŒãããRSCãšãã«ã¿ã¢ããããŒããéããŠã¯ã©ã€ã¢ã³ããµã€ãã®JavaScriptå®è¡ãæå°éã«æããããšã§ãã¢ããªã±ãŒã·ã§ã³ã¯ããåºç¯ãªããã€ã¹ã®ãŠãŒã¶ãŒã«ãšã£ãŠã¢ã¯ã»ã¹ãããããªããŸããããã«ãããå æ¬æ§ãä¿é²ãããããŒããŠã§ã¢ã«é¢ä¿ãªããã¹ãŠã®ãŠãŒã¶ãŒã«äžè²«ããäœéšãä¿èšŒãããŸãã
åœéãŠãŒã¶ãŒã®ã¬ã€ãã³ã·åæžïŒ
ã°ããŒãã«ãªãŠãŒã¶ãŒããŒã¹ãæã€ã¢ããªã±ãŒã·ã§ã³ã§ã¯ããµãŒããŒãžã®å°ççãªè·é¢ã倧ããªã¬ã€ãã³ã·ãåŒãèµ·ããå¯èœæ§ããããŸããCDNã圹ç«ã¡ãŸãããåçã³ã³ãã³ãã®é ä¿¡ã¯äŸç¶ãšããŠèª²é¡ãšãªãããšããããŸããã€ã³ã¯ãªã¡ã³ã¿ã«ã¹ããªãŒãã³ã°ã«ããããµãŒããŒã¯æåã®HTMLãéä¿¡ãããã®åŸã³ã³ããŒãã³ãã®æŽæ°ãæºåãã§ããæç¹ã§ã¹ããªãŒãã³ã°ã§ããŸããããã¯ããŠãŒã¶ãŒã«ããè¿ããµãŒããŒããè¡ãããå¯èœæ§ããããæŽæ°ã®äœæã¬ã€ãã³ã·ãåæžããŸãããã«ã¿ã¢ããããŒãã®ãµã€ãºãå°ããããšãããããã¯ãŒã¯ã¬ã€ãã³ã·ã®åœ±é¿ãããã«è»œæžããŸãã
äžçäžããã®äºäŸïŒ
- æ±åã¢ãžã¢ã®eã³ããŒã¹ïŒ ã€ã³ããã·ã¢ããããã ã®ãããªåœã ã§ã¯ãã¢ãã€ã«ã€ã³ã¿ãŒãããã®æ®åçã¯é«ããã®ã®ãé床ãå€åããããšããããŸãããã®ãããªå°åã®ãã¡ãã·ã§ã³eã³ããŒã¹ãã©ãããã©ãŒã ã¯ãRSCãšãã«ã¿ã¢ããããŒããæŽ»çšããŠãæµåçãªãã©ãŠãžã³ã°äœéšãæäŸã§ããŸãããŠãŒã¶ãŒã¯ååç»åã詳现ãè¿ éã«ç¢ºèªããã«ãŒãã«ååã远å ããããŒãžã®åèªã¿èŸŒã¿ãåŸ ã€ããšãªãã«ãŒããå³åº§ã«æŽæ°ãããã®ãèŠãããšãã§ããŸãã
- åç±³ã®ãã¥ãŒã¹ã»ã¡ãã£ã¢ïŒ ã©ãã³ã¢ã¡ãªã«å šåã®ãŠãŒã¶ãŒã«ãµãŒãã¹ãæäŸããäž»èŠãªãã¥ãŒã¹ããŒã¿ã«ã¯ãã€ã³ã¯ãªã¡ã³ã¿ã«ã¹ããªãŒãã³ã°ã䜿çšããŠãå ¬éãããã°ããã®éå ±èšäºãé ä¿¡ã§ããŸãããŠãŒã¶ãŒã®æ¥ç¶ãé ããŠããèŠåºããšåæã³ã³ãã³ããæ®µéçã«è¡šç€ºããããã®åŸãªããã¡ãã£ã¢ãã¹ããªãŒãã³ã°ãããã«ã€ããŠè¡šç€ºãããŸããèšäºãä¿åãããã³ã¡ã³ãããããããããªåŸç¶ã®ã€ã³ã¿ã©ã¯ã·ã§ã³ã¯ããã«ã¿ã¢ããããŒãã«ããç¬æã«æããããŸãã
- ã¢ããªã«ã®SaaSãã©ãããã©ãŒã ïŒ ã¢ããªã«è«žåœã®äŒæ¥ã䜿çšããSoftware-as-a-ServiceïŒSaaSïŒã¢ããªã±ãŒã·ã§ã³ã¯ãå¿çæ§ã®é«ãããã·ã¥ããŒãäœéšãæäŸã§ããŸããããŒã¿ã®å¯èŠåããªã¢ã«ã¿ã€ã ã®ææšã¯å¹ççã«æŽæ°ããã倿ŽãããããŒã¿ã®ã¿ããã«ã¿ã¢ããããŒããä»ããŠéä¿¡ããããããããŸãå ç¢ã§ãªãã€ã³ã¿ãŒãããæ¥ç¶ã§ãã¢ããªã±ãŒã·ã§ã³ãå©çšå¯èœã«ãªããŸãã
ã¢ãŒããã¯ãã£ã«é¢ããèæ ®äºé ãšéçºã¯ãŒã¯ãããŒ
ãã«ã¿ã¢ããããŒããšã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ãåããRSCãæ¡çšããã«ã¯ãã¢ããªã±ãŒã·ã§ã³ã¢ãŒããã¯ãã£ã«é¢ããèãæ¹ã®è»¢æãå¿ èŠã§ããéçºè ã¯æ¬¡ã®ããšãè¡ãå¿ èŠããããŸãïŒ
- ãµãŒããŒ/ã¯ã©ã€ã¢ã³ãã®å¢çãçè§£ããïŒ ã©ã®ã³ã³ããŒãã³ãããµãŒããŒã§å®è¡ããïŒServer ComponentsïŒãã©ããã¯ã©ã€ã¢ã³ãã§å®è¡ããããïŒClient Componentsãéåžžã¯ã€ã³ã¿ã©ã¯ãã£ããã£çšïŒãæç¢ºã«åºå¥ããŸãã
- ããŒã¿ãã§ãããæé©åããïŒ Server ComponentsãæŽ»çšããŠããŒã¿ã«çŽæ¥ã¢ã¯ã»ã¹ããäžèŠãªã¯ã©ã€ã¢ã³ããµã€ãã®APIåŒã³åºããé¿ããŸãã
- éåææäœãåãå ¥ããïŒ Server Componentsã¯éåæããŒã¿ãã§ãããšèªç¶ã«é£æºããããããããéçºãã¿ãŒã³ã®äžå¿ã«æ®ããã¹ãã§ãã
- ç¶æ ãæ éã«ç®¡çããïŒ Server Componentsã¯äŒçµ±çãªæå³ã§ã¯ã¹ããŒãã¬ã¹ã§ããããã®åã¬ã³ããªã³ã°åäœã¯propsãšã³ã³ããã¹ãã«ãã£ãŠé§åãããŸããã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ã®ããã®ã¯ã©ã€ã¢ã³ãäžã®ç¶æ 管çã¯äŸç¶ãšããŠååšããŸãã
- çŸå®çãªæ¡ä»¶äžã§ãã¹ãããïŒ ãããã®ã¹ããªãŒãã³ã°æ©èœã®å©ç¹ãçã«çè§£ããæé©åããããã«ã¯ãæ§ã ãªãããã¯ãŒã¯é床ãããã€ã¹ã§ã¢ããªã±ãŒã·ã§ã³ããã¹ãããããšãäžå¯æ¬ ã§ãã
äž»èŠãªæè¡ãšãã¬ãŒã ã¯ãŒã¯ïŒ
Next.jsã®ãããªãã¬ãŒã ã¯ãŒã¯ã¯ãReact Server Componentsãšãã®ã¹ããªãŒãã³ã°æ©èœã®å®è£ ãšæ®åã®æåç·ã«ç«ã£ãŠããŸãããNext.jsã®App Routerã¯ãããã®æŠå¿µãåºç¯ã«æŽ»çšããã¢ãã³ã§é«æ§èœãªReactã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®å ç¢ãªåºç€ãæäŸããŸããåºç€ãšãªãã¹ããªãŒãã³ã°ãããã³ã«ïŒå€ãã®å ŽåãWebSocketãServer-Sent Eventsã䜿çšïŒãšãã«ã¿ã¢ããããŒãçšã®ã·ãªã¢ã©ã€ãºåœ¢åŒããå šäœçãªå¹çã®éµãšãªããŸãã
å°æ¥çãªæå³åããšå¯èœæ§
ãã«ã¿ã¢ããããŒããšã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ãåããRSCã®é²æ©ã¯ãåãªã挞é²çãªæ¹åã§ã¯ãããŸããããããã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³ãã©ã®ããã«æ§ç¯ãããé ä¿¡ãããããæ ¹æ¬çã«åèãããã®ã§ããç§ãã¡ã¯æ¬¡ã®ãããªããšãæåŸ ã§ããŸãïŒ
- ããæŽç·ŽãããUIãã¿ãŒã³ïŒ éçºè ã¯ã以åã¯ããã©ãŒãã³ã¹äžã®å¶çŽããå®çŸäžå¯èœã ã£ããä¿¡ããããªãã»ã©ãªããã§ãã€ãããã¯ãªUIãæ§ç¯ã§ããããã«ãªããŸãã
- ã¯ã©ã€ã¢ã³ããµã€ããã³ãã«ã®ãããªãåæžïŒ ããå€ãã®ããžãã¯ããµãŒããŒã«ç§»è¡ããã«ã€ããŠãã¯ã©ã€ã¢ã³ããµã€ãã®JavaScriptãã³ãã«ã¯çž®å°ãç¶ããåæèªã¿èŸŒã¿ãéããªããŸãã
- éçºè äœéšã®åäžïŒ ã¢ãŒããã¯ãã£ã®è»¢æã¯åŠç¿ãå¿ èŠãšããŸãããããã·ã³ãã«ãªããŒã¿ãã§ãããšãµãŒããŒäžã§ã®äºæž¬å¯èœãªã¬ã³ããªã³ã°ã®å¯èœæ§ã¯ãããè¯ãéçºäœéšã«ã€ãªããå¯èœæ§ããããŸãã
- ã¢ã¯ã»ã·ããªãã£ã®åäžïŒ ããã©ãŒãã³ã¹ã®åäžã¯ãäžçäžã®ãŠãŒã¶ãŒã«ãšã£ãŠã®ã¢ã¯ã»ã·ããªãã£ã®åäžã«çŽæ¥ã€ãªãããããžã¿ã«ããã€ããåããããšã«ãªããŸãã
React Server Componentsã®æ ã¯ãŸã çµãã£ãŠããŸãããæè¡ãæçããéçºè ã®çè§£ãæ·±ãŸãã«ã€ããŠããã«ã¿ã¢ããããŒããšã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã®åãæŽ»çšããŠãäžçäžã®ãŠãŒã¶ãŒã«åè¶ããäœéšãæäŸãããããã«é©æ°çãªã¢ããªã±ãŒã·ã§ã³ãç»å Žããã§ãããã
çµè«
ãã«ã¿ã¢ããããŒããšã€ã³ã¯ãªã¡ã³ã¿ã«ã³ã³ããŒãã³ãã¹ããªãŒãã³ã°ã«ãã£ãŠåŒ·åãããReact Server Componentsã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ã«ãããèšå¿µç¢çãªé£èºã§ãããããã¯ãç¹ã«åçãªã¢ããªã±ãŒã·ã§ã³ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«å¯ŸãããŠã§ãããã©ãŒãã³ã¹ã®é·å¹Žã®èª²é¡ã«å¯ŸåŠããŸãããµãŒããŒãã³ã³ããŒãã³ããã¬ã³ããªã³ã°ããå¿ èŠãªå€æŽã®ã¿ã段éçã«éä¿¡ã§ããããã«ããããšã§ããããã®æè¡ã¯ãããéãèªã¿èŸŒã¿æéãããå¿çæ§ã®é«ãUIããããŠå€æ§ãªãããã¯ãŒã¯ç¶æ³ãããã€ã¹ã®ãŠãŒã¶ãŒã«ãšã£ãŠããå æ¬çãªãŠã§ããçŽæããŸãããã®ãã©ãã€ã ã·ãããåãå ¥ããããšã¯ãã°ããŒãã«åãããäžçã®ããã«ã次äžä»£ã®é«æ§èœã§é åçããã€ã¢ã¯ã»ã¹ãããããŠã§ãã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯ãç®æãéçºè ã«ãšã£ãŠéµãšãªããŸãã